﻿@page "/SplashScreen"

@using FluentUI.Demo.Shared.Pages.SplashScreen.Examples;

<PageTitle>@App.PageTitle("SlashScreen")</PageTitle>

<h1>SplashScreen</h1>

<p>
    For defining the information to display in the <code>SplashScreen</code>, the <code>SplashScreenContent</code> class is used. See the API
    documentation below for the available properties
</p>

<p>
    To show a splash screen, the <code>DialogService</code> is used. The <code>DialogService</code> is a singleton service that can be injected
    into any page/component. It exposes the following methods to show a splash screen dialog:
    <ul>
        <li><code>ShowSplashScreen</code> / <code>ShowSplashScreenAsync</code> (uses the <code>FluentSplashScreen</code> to show the dialog)</li>
        <li>
            <code>ShowSplashScreen&lt;T&gt;</code> / <code>ShowSplashScreenAsync&lt;T&gt;</code> where T is a custom component which inherits the <code>FluentSplashScreen</code> component
            and implements <code>IDialogContentComponent&lt;SplashScreenContent&gt;</code> .</li>
    </ul>
</p>
<p>
    Internally, the <code>ShowSplashScreen</code> methods call the <code>ShowDialog</code> methods. If is possible to directly call these methods and thereby have
    access to all of the parameters. The <code>ShowSplashScreen</code> variants are just convenience methods that make ite easier to work with panels.
</p>


<h2 id="example">Examples</h2>

<DemoSection Title="Default splash screen" Component="@typeof(DialogSplashScreenDefault)" CollocatedFiles="@(new[] { "cs" })">
    <Description>
        This example shows the standard splash screen. Its content can be altered by means of the <code>SplashScreenContent</code> class.
        In this example, we simulate a startup process that takes 4 seconds.
    </Description>
</DemoSection>

<DemoSection Title="Custom splash screen" Component="@typeof(DialogSplashScreenCustom)" CollocatedFiles="@(new[] { "cs" })" AdditionalFiles="@(new [] {"CustomSplashScreen.razor", "CustomSplashScreen.razor.css"})">
    <Description>
        The custom example shows a splash screen that uses a customized layout.
        See the <code>CustomSplashScreen</code> razor file to see how that can be done.
    </Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(SplashScreenContent)" />

<ApiDocumentation Component="typeof(FluentSplashScreen)" />
